import 'package:flutter/cupertino.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_demo/pages/custom/custom_paint_page.dart';
import 'package:flutter_demo/pages/page_with_title.dart';

import '../../widgets/app_widgets.dart';

class ContentSwitchAnimationPage extends PageWithTitle {
  const ContentSwitchAnimationPage() : super("内容切换动画(AnimatedCrossFade、AnimatedSwitcher)");

  @override
  List<Widget> buildContentWidgets(BuildContext context) {
    return const [
      PrimaryTitle("简介"),
      BodyText("内容切换动画组件，用于在子组件变更时，执行一个切换动画实现平滑过渡"),
      AppSpacer.large,
      _CrossFadeExample(),
      UlItem("AnimatedCrossFade"),
      BodyText("以淡入淡出动画形式切换两个组件的显示，类似Android ViewSwitcher"),
      LabelText("执行动画时，若两个组件尺寸不一致，会强制使用相同的宽度，对齐顶部然后以动画形式改变组件底部，形成收起或展开的动画"),
      LabelText("- firstChild，第一个显示的组件"),
      LabelText("- secondChild，第二个显示的组件"),
      LabelText("- crossFadeState，用于修改状态切换两个组件的显示"),
      LabelText("- duration，第一个组件切换第二个组件的动画时长"),
      LabelText("- reverseDuration，第二个组件切换第一个组件的动画时长"),
      LabelText("- firstCurve，第一个组件执行的动画曲线（线性、加速、减速等）"),
      LabelText("- secondCurve，第二个组件执行的动画曲线"),
      LabelText("- sizeCurve，高度修改动画的动画曲线"),
      LabelText("- alignment，两个组件在容器中的对齐方式"),
      AppSpacer.large,
      _SwitcherExample(),
      UlItem("AnimatedSwitcher"),
      BodyText("在显示不同组件（遵循widget的判定，即类型不同或者key不同即视为不同组件）时，"
          "执行转场动画"),
      LabelText("- duration，动画时长"),
      LabelText("- reverseDuration，反转动画时长，新组件正在执行入场动画时，又更新了新的组"
          "件，则上个新组件将执行反转动画而不是执行出场动画，默认与duration同值"),
      LabelText("- switchInCurve，入场动画插值器，默认线性"),
      LabelText("- switchOutCurve，出场动画插值器，默认线性"),
      LabelText("- transitionBuilder，转场动画生成器，默认使用FadeTransition"),
      LabelText("- layoutBuilder，布局生成器，默认使用Stack并且子组件居中"),
    ];
  }
}

class _CrossFadeExample extends StatefulWidget {
  const _CrossFadeExample();

  @override
  State<StatefulWidget> createState() {
    return _CrossFadeExampleState();
  }
}

///模拟网络请求后以动画形式刷新页面
class _CrossFadeExampleState extends State<_CrossFadeExample> {
  var _currShow = CrossFadeState.showFirst;

  @override
  void initState() {
    super.initState();
    Future.delayed(const Duration(milliseconds: 2000)).then((v) {
      setState(() {
        _currShow = CrossFadeState.showSecond;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedCrossFade(
      firstChild: const SizedBox(
        width: double.infinity, //宽度设置为无限，可以撑满可用空间
        child: CircleLoading(),
      ),
      secondChild:
          const Text(" 111111111111111111 \n222222222 \n333333333333333333"),
      crossFadeState: _currShow,
      duration: const Duration(milliseconds: 300),
    );
  }
}

class _SwitcherExample extends StatefulWidget {
  const _SwitcherExample();

  @override
  State<StatefulWidget> createState() {
    return _SwitcherExampleState();
  }
}

///模拟网络请求后以动画形式刷新页面
class _SwitcherExampleState extends State<_SwitcherExample> {
  var _loadding = true;

  @override
  void initState() {
    super.initState();
    Future.delayed(const Duration(milliseconds: 2000)).then((v) {
      setState(() {
        _loadding = false;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    late Widget child;
    if (_loadding) {
      child = const SizedBox(
        width: double.infinity, //宽度设置为无限，可以撑满可用空间
        child: CircleLoading(),
      );
    } else {
      child =
          const Text(" 111111111111111111 \n222222222 \n333333333333333333");
    }
    return AnimatedSwitcher(
      duration: const Duration(milliseconds: 300),//动画时长
      reverseDuration: const Duration(milliseconds: 300),//反转动画时长，新组件正在执行入场动画时，又更新了新的组件，则上个新组件将执行反转动画而不是执行出场动画
      switchInCurve: Curves.linear,//入场动画插值器，默认线性
      switchOutCurve: Curves.linear,//出场动画插值器，默认线性
      transitionBuilder: AnimatedSwitcher.defaultTransitionBuilder,//转场动画生成器，默认使用FadeTransition
      layoutBuilder: AnimatedSwitcher.defaultLayoutBuilder,//布局容器，默认使用Stack并且子组件居中
      child: child,
    );
  }
}
